<script lang="ts" setup>
import { defineAsyncComponent, ref } from 'vue';
const BarHeader = defineAsyncComponent(() => import('@/components/DetailBarSup/BarHeader.vue'));
const BarContent = defineAsyncComponent(() => import('@/components/DetailBarSup/BarContent.vue'));
const BarFooter = defineAsyncComponent(() => import('@/components/DetailBarSup/BarFooter.vue'));
const Editor = defineAsyncComponent(() => import('@/components/Editor.vue'));
const ed = ref();
const handleEnter = () => {
	ed.value.editing = true;
}
const handleExit = () => {
	ed.value.editing = false;
}
</script>

<template>
	<div class="detail-bar">
		<bar-header></bar-header>
		<bar-content></bar-content>
		<bar-footer @enterEditing="handleEnter" @exitEditing="handleExit"></bar-footer>
		<editor ref="ed"></editor>
	</div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss";

.detail-bar {
	width: $minWid;
	margin: 15px auto;
	padding: 15px 20px;
	background-color: #fff;
}
</style>
